<template>
  <div>
    <van-nav-bar
      title="课程详情"
      left-text="返回"
      left-arrow
      @click-left="$router.go(-1)"
    />
    <div class="feng_img">
      <img  v-show="imgshow" :src="'http://upenglish.ayvvv.cn'+bigClassDetail.comboimage" alt="">
    </div>
    <div class="detail_xia">
      <div class="detail_title" v-show="imgshow">
        <h3>UP 英语</h3>
        <span slot="title" class="time">{{ bigClassDetail.createtime | dateFormat }}</span>
      </div>
    <div v-show="imgshow">
      <div class="detail_text">
        <div>
          <span></span>
        </div>
        <p v-text="bigClassDetail.comboname"></p>
        <p>￥{{ bigClassDetail.comboprice }}</p>

      </div>
      <div class="detail_btn">
        <van-button type="info" round>全部课程</van-button>
        <div class="detail_gou">
          <van-button type="primary" round @click="allBigAllClass(bigClassDetail.comboprice)">全部购买</van-button>
        </div>
      </div>
    </div>
      <van-list
      v-for="item in smallClass"
      :key="item.id"
      >
        <van-cell
        :title="item.classname"
        class="cell"
        >
        <van-popup v-model="show">内容</van-popup>
        <div slot="default" class="time">
          <span>开始：{{ item.startime | dateFormat }}</span>
        </div>
        </van-cell>
      </van-list>
    </div>
  </div>
</template>

<script>
import { detailList, bigClass, outDataClass } from '@/api/class.js'
import { mapState } from 'vuex'
export default {
  data () {
    return {
      bigClassDetail: [],
      smallClass: [],
      newClass: [],
      show: false,
      oldClass: [],
      imgshow: false
    }
  },
  prop: {
  },
  created () {
    this.getDetailList()
    this.loadOutDataClass()
    // this.getGilvClass()
  },
  computed: {
    ...mapState(['id'])
  },
  methods: {
    async getDetailList () {
      this.$toast.loading({
        message: '加载中...',
        forbidClick: true,
        duration: 0
      })
      const id = this.$route.params.id
      // console.log(id)
      const { data } = await detailList({
        comboid: id
      })
      // console.log(data)
      this.bigClassDetail = data.combo
      this.smallClass = data.class
      if (this.bigClassDetail) {
        this.imgshow = true
      }
    },
    async allBigAllClass (i) {
      const comboid = this.$route.params.id
      // console.log(this.id)
      const { data } = await bigClass({
        comboid: comboid,
        userid: this.id,
        gobuyprice: i
      })
      // console.log(data)
      if (data.code === 203) {
        this.$toast.fail('此题已被购买')
        this.$router.push('/class')
      } else if (data.code === 200) {
        this.$toast.success('此题已被购买')
        this.$router.push('/class')
      } else {
        this.$toast.fail('购买失败')
      }
    },
    async loadOutDataClass () {
      this.$toast.loading({
        message: '加载中...',
        forbidClick: true,
        duration: 0
      })
      const Qid = this.$route.params.id
      const { data } = await outDataClass({
        userid: this.id,
        comboid: Qid
      })
      // console.log(data)
      this.oldClass = data.class
      this.newClass = data.learnresult
      this.$toast.clear()
    }
    // async getGilvClass (id) {
    //   const Qid = this.$route.params.id
    //   const { data } = await jilvClass({
    //     userid: this.id,
    //     comboid: Qid,
    //     classid: id,
    //     entrytime:
    //     exittime:
    //   })
    // }
  }
}
</script>

<style scoped lang='less'>
.feng_img {
  img {
    width: 750px;
    height: 500px;
  }
}
.detail_xia {
  width: 600px;
  margin: 0 auto;
  .detail_title {
    display: flex;
    align-items: center;
    justify-content:space-between;
    padding-bottom: 20px;
    margin-top: 15px;
  }
  .detail_text {
    padding-bottom: 20px;
  }
  .detail_btn {
    position: relative;
    padding-bottom: 20px;
    .van-button {
      width: 180px;
      height: 50px;
    }
  }
  .detail_gou {
    display: inline;
    position: absolute;
    right: 0;
    .van-button {
      width: 230px;
      height: 50px;
    }
  }
  .cell {
    background-color: #eee;
    height: 60px;
    line-height: 60px;
    padding: 0;
    border-radius: 20px;
    margin-bottom: 20px;
    padding-left: 20px;
    padding-right: 20px;
    box-shadow: 0px 3px 0px #ddd;
  }
}
.time span {
  font-size: 14px;
}
</style>
